<template>
  <div
    class="header-search"
  >
    <el-table
      ref="singleTable"
      :data="staffList"
      highlight-current-row
      style="width: 100%"
      @current-change="handleCurrentChange"
    >
      <el-table-column
        width="50"
        property="id"
      />
      <el-table-column
        property="name"
        label="姓名"
        width="120"
      />

      <el-table-column
        property="age"
        label="年龄"
      />

      <el-table-column
        property="provinceName"
        label="籍贯"
      />

      <el-table-column
        property="seniority"
        label="工作年限"
      />

      <el-table-column
        property="orderNum"
        label="服务类型"
      >
        <template v-slot="scope">
          {{ staffTypeMap[scope.row.staffType] }}
        </template>
      </el-table-column>

      <el-table-column
        property="orderNum"
        label="服务次数"
      />
    </el-table>
  </div>
</template>

<script>

import { availableAssignStaffList } from '@/api/rest/custom'
import { dictConfigItemByDictKeyList } from '@/api/rest/dictconfig'
import { DICT_CONFIG_KEY_STAFF_TYPE } from '@/utils/constant'

export default {
  name: 'CustomStaffSelector',
  filters: {
    staffTypeFilter(value) {
      return this.staffTypeMap[value]
    }
  },
  props: {
    model: {
      type: [Number, String],
      default: 0
    },
    orderId: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      staffList: [],
      staffTypeList: [],
      staffTypeMap: {}
    }
  },
  computed: {

  },
  watch: {
  },
  created() {
    this.getStaffTypeList()
    this.loadStaffList()
  },
  mounted() {
  },
  methods: {
    getStaffTypeList() {
      dictConfigItemByDictKeyList(DICT_CONFIG_KEY_STAFF_TYPE)
        .then(response => {
          this.staffTypeList = []
          this.staffTypeMap = {}
          response.data.forEach(item => {
            this.staffTypeList.push({ value: item.itemValue, name: item.itemName })
            this.staffTypeMap[item.itemValue] = item.itemName
          })
        })
    },
    loadStaffList() {
      availableAssignStaffList(this.orderId).then(res => {
        const { staffList } = res.data
        this.staffList = staffList
      })
    },
    handleCurrentChange(e) {
      this.$emit('update:model', e.id)
      this.$emit('input', e.id)
      this.$emit('change', e.id)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
